<script>

$(".tags").click(function (){
	tag_name = $(this).attr("name");
	$("#cards").load("/cards/restrict_tag", {restrict:tag_name});
});


$(".0tags").click(function (){
	var nam = $(this).attr("name");
	var oldstuff = $(".restrictions").attr("name");
	var tq = $("#tag_query").attr("name");
	//$("#old_restrictions").text("Hello")
	var restricts = oldstuff + " " + nam;
	alert(restricts)
	//alert(oldstuff+" "+nam);
	$("#cards").load("/cards/ajax",{query:tq, restrict: restricts, search_type:'matt'});
});

$(".expand_card").click(function () {
	$(this).next(".card_details").toggle();
});

$(".select_card_new").click(function() {
	$(this).parent().clone().appendTo("#reading_pane_main");
	$("#reading_pane_main > .highlight > .card_details").show();
	$("#reading_pane_main > .highlight").children(".select_card_new").remove();
	$('<span class="remove_card_2">Remove<span>').appendTo("#reading_pane_main > .highlight:last");
	$(".remove_card_2").click(function () {
		var Papa = $(this).parent();
		var pos = $("#reading_pane_main").children(".highlight").index(Papa);
		pos = pos +1;			
		//$("#displaystuff").text(pos);
		$("#side-c").show();
		//$("#selected .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});
		$("#selected .highlight:nth-child("+pos+")").remove();						
		$("#side-c").hide();
		$(this).parent().remove();
	});

	$(this).parent().clone().appendTo("#selected");
	//$('<span class="remove_card">Remove<span>').appendTo("#selected");
	$("#selected > .highlight").css("max-width", "90%");
	$("#selected > .highlight").children(".select_card_new").remove();
	$("<span class='remove_card'>Remove</span>").appendTo("#selected > .highlight:last");
	$(".remove_card").click(function () {
		var Papa = $(this).parent();
		var pos = $("#selected").children(".highlight").index(Papa);
		pos = pos +1;			
		//$("#displaystuff").text(pos);
		$("#side-r").show();
		//$("#reading_pane_main .highlight:nth-child("+pos+")").css({'border':'green solid 3px'});
		$("#reading_pane_main .highlight:nth-child("+pos+")").remove();						
		$("#side-r").hide();
		$(this).parent().remove();
	});
	//$("#selected > .highlight").toggleClass(".minihighlight");  //This should be working
	$("#selected > .highlight > .card_tags").hide();
	$("#selected > .highlight > .expand_card").hide();
	$("#selected > .highlight > .card_details").hide();

	//$(this).parent().css({'border':'green solid 3px'});
	//$(this).parent().children(".card_title").css({'border':'green solid 3px'});
});

$(".highlight").mouseover(function(){
	var i_ndex = $("#cards").children(".highlight").index(this);
	//$("#displaystuff").text(i_ndex);
	$(this).css({'border':'red solid 3px'});
	$(this).children(".card_details").show();
}).mouseout(function(){
	$(this).css({'border':'black solid 3px'});
	$(this).children(".card_details").hide();
});

$("#constraints").mouseover(function(){
}).mouseout(function(){
});


//$(".suggestion").click(function (){
//	var TheTextBox = document.getElementById("");
//  TheTextBox.value = TheTextBox.value + text;
//});

//$(".highlight:last").css("background","green"); <ul class="card_variables">{%for c in card.variables.all%}<li> {{c.si_units}}</li> {%endfor %}</ul>


</script>

<div id='tagbox'>
{%if not unrecognized_variables%}
<div class="text">Constraints:</div>
<div class="constraints">
	{%for r in restriction_set%}
		<span class="tags" href="" name="{{r}}">{{r}}</span>
	{%endfor%}
	{% for r in restrictions %} 
		<span class='restrictions' name="{{r}}"><del>{{r}}</del></span> 
	{% endfor %}
</div>
{% endif %}
</div>

{%if unrecognized_variables%}
<div id="alert"> <p>You screwed up your search.  Lets see if I can help </p> </div>
{%for v in unrecognized_variables%}  <!-- v = [[possible_variable_objects], search_string] -->
<br>
<div class="text"> When you say:  <b>{{ v.0 }}</b> </div>
<div class="text"> maybe you mean: </div>
{%for i in v.1%} <p id="variable_name"><b>({{ i.symbol }})</b> {{i.name}}</p>{%endfor%}	<!-- how can I make clicking on this add it to the search? -->
{%endfor%}

{% else %}
	<p class="text">Search Terms:</p>
	<div id="searched_variables">
		{%for v in recognized_variables%}
		<p id="variable_name"><b>({{ v.symbol }})</b> {{v.name}}</p>
		{%endfor%}
	</div>

<!-- Oops, I killed 'oldrestrictions', so the javascript broke.  I should do something about that EDIT: FIXED! -->


<!--
<div id="constraints_excluded">
<p id="text">Constraints Excluded:</p>
{%for v in restrictions%}
<p>{{v}}</p>
{%endfor%}
</div>
-->

<!--This just saves the previous list of searched variables -->
<p id="tag_query" name="{{tagquery}}"></p>


<div class="text">Results:</div>
<div id="cards">
{%for card in index_cards%} <!-- card = [card_object, unsolved_variable_object] -->
<div class='card_num_{% cycle "1" "2" "3" "4" "5" %}'>

<div class='highlight'>

<p class="card_title"><b><i>{{card.0.title}}</b></i></p> <p class="card_tags">Variables Solved For:  ({{card.1.0.symbol}}) {{ card.1.0.name }}  </p>
<center><img height=30px src="/postimg/{{card.0.image}}" alt={{card.0.equation}} class="card_image"></center> 
<span class="select_card_new">Select</span><span class="expand_card"><i color=blue>more</i></span> <p class="card_details"> <br>{{card.details}}</p>
</div>

{%endfor%}
{% endif %}
</div>
</div>

<script>
$(".expand_card").click(function () {
	$(this).next(".card_details").toggle();
});
</script>
